<template>
  <div class="e-wrap">
    <w-form-validate @on-validate="saveFloor">
      <div class="position-panel">
        <upload-img :title='`图标`' :imgSrc='addParams.iconPath' v-if="$route.query.terminal == 'MOBILE'" :type='`homeFloor`' @on-img='getImg'></upload-img>
        <div class="e-item">
          <span class="title">终端</span>
          <div class="dis-block">
            <w-select :options='deviceList' v-model='addParams.deviceType'></w-select>
          </div>
        </div>
        <div class="e-item">
          <span class="title">楼层标题</span>
          <div class="dis-block">
              <w-input :holder="`请填写`" v-model='addParams.gfName' :maxlength='4'></w-input>
          </div>
          <em>楼层标题最多为4个字</em>
        </div>
        <div class="e-item">
          <span class="title">楼层英文</span>
          <div class="dis-block">
              <w-input :holder="`请填写`" v-model='addParams.enName'></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">颜色选择</span>
          <div class="dis-block" style="padding-top: 6px;">
            <!-- <w-input :holder="`请填写`" v-model='addParams.gfCss' rule="isColor" error="*输入合法的16进制色值"></w-input> -->
            <colorPicker v-model="addParams.gfCss" @change="changeColor"></colorPicker>
          </div>
          <em>系统默认2种样式：style1(4主图，均为商品),style2(9主图，可以为商品、图片、广告)</em>
        </div>
        <div class="e-item">
          <span class="title">是否显示</span>
          <div class="dis-block">
            <w-switch v-model='isView' @on-change='changeSwitch'></w-switch>
          </div>
        </div>
        <div class="e-item">
          <span class="title">展示名称</span>
          <div class="dis-block">
            <w-radio name='viewname' :label='1' v-model="addParams.isViewName">是</w-radio>
            <w-radio name='viewname' :label='0' v-model="addParams.isViewName">否</w-radio>
          </div>
        </div>
        <div class="e-item" v-if="!$route.query.id">
          <span class="title">模板名称</span>
          <div class="dis-block">
              <w-select :defaultSe='false' :options='wideTempList' v-model="addParams.wideTemplate"></w-select >
          </div>
        </div>
        <div class="e-item">
          <span class="title">排序</span>
          <div class="dis-block">
            <w-input :holder='`请填写`' v-model='addParams.gfSequence' rule="isEmpty" error="*此项必填"></w-input>
          </div>
          <em>序号越小越靠前</em>
        </div>
        <div class="e-item">
          <span class="title">关键字</span>
          <div class="dis-block">
              <w-input :holder='`请填写`' v-model='addParams.keyWord'></w-input>
          </div>
          <em>显示在模板右上方，多个以英文逗号隔开(时髦套装,人气潮鞋……)</em>
        </div>
        <!-- 按钮 -->
        <div class='submit-btn'>
          <button type="submit" class="btn">提交</button>
          <button class="btn colse" @click.prevent="$router.go(-1)">取消</button>
        </div>
      </div>
    </w-form-validate>
  </div>
</template>

<script>
import colorPicker from '../classifyMange/components/colorPicker'
import UploadImg from '../homeDecorate/components/uploadImg'
import { apiFloorMange } from 'js/api'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      deviceList: [
        {
          label: 'pc端',
          value: 'PC'
        }, 
        {
          label: 'app端',
          value: 'MOBILE'
        }
      ],
      wideTempList: [],
      isView: true,
      // 查询楼层信息 -- 参数
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: Number(this.$route.query.id) || ''
      },
      // 添加楼层 -- 参数
      addParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: Number(this.$route.query.id) || '',
        deviceType: this.$route.query.terminal || '',
        gfName: '',
        enName: '',
        gfCss: '#f00384',
        gfDisplay: '0',
        gfSequence: '',
        isViewName: '0',
        keyWord: '',
        wideTemplate: '',
        oldSequence: '',
        nowSequence: '',
        iconPath: ''
      }
    }
  },
  created() {
    this.fetchWideTemplate()
    if (this.$route.query.id) {
      this._getFloorInfo()
    }
    if (this.$route.query.terminal == 'MOBILE') {
      this.wideTempList = this.wideTemp.app
    } else {
      this.wideTempList = this.wideTemp.pc
    }
  },    
  computed: {
    ...mapGetters(['token', 'wideTemp'])
  },
  components: {
    colorPicker,
    'upload-img': UploadImg
  },
  methods: {
    ...mapActions(['fetchWideTemplate']),
    // 获取频道 楼层信息
    changeColor(color) {
      this.addParams.gfCss = color
    },
    _getFloorInfo() {
      this.queryParams.accessToken = this.token
      apiFloorMange.getHFloorInfo(this.queryParams).then(data => {
        let obj = data.data.goodsFloor || {}
        this.addParams.deviceType = obj.deviceType || this.$route.query.terminal
        this.addParams.gfName = obj.gfName || ''
        this.addParams.enName = obj.enName || ''
        this.addParams.gfCss = obj.gfCss ? '#' + obj.gfCss : '#f00384'
        this.isView = Boolean(obj.gfDisplay) || false
        this.addParams.gfSequence = this.addParams.nowSequence = obj.gfSequence
        this.addParams.keyWord = obj.keyWord || ''
        this.addParams.isViewName = obj.isViewName || '0'
        this.addParams.oldSequence = this.addParams.gfSequence
        this.addParams.wideTemplate = obj.wideTemplate
        this.addParams.iconPath = obj.iconPath || ''
      })
    },
    getImg(src) {
      this.addParams.iconPath = src
    },
    changeSwitch(flag) {
      if (flag == 'false') {
        this.isView = false
      } else {
        this.isView = true
      }
    },
    saveFloor() {
      if (!this.addParams.wideTemplate) {
        this.$toast('请选择模板名称')
        return
      }
      this.addParams.accessToken = this.token
      this.addParams.gfDisplay = String(Number(this.isView))
      this.addParams.gfCss = this.addParams.gfCss.substring(1)
      if (!this.addParams.oldSequence) {
        this.addParams.oldSequence = this.addParams.nowSequence = this.addParams.gfSequence
      }
      this.addParams.isViewName = String(this.addParams.isViewName)
      // this.addParams.gfSequence = this.addParams.nowSequence = Number(this.addParams.gfSequence)
      apiFloorMange.addHFloor(this.addParams).then(data => {
        if (data && data.code != 200) return
        this.$toast(`${this.$route.query.id ? '修改' : '新增'}楼层成功`, () => {
          this.$router.go(-1)
        })
      })
    }
  }
}
</script>

<style>
.mui-switch {
  top: 4px;
}
.mui-switch:checked:before {
  top: 1px !important;
}
</style>

<style lang='scss' scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.position-panel {
  margin: 0 auto;
  height: 700px;
  .e-item {
    display: block;
    width: 415px;
    margin: 0 auto 20px;
    .title {
      width: 106px;
      font-size: 14px;
      margin-right: 20px;
    }
    .dis-block {
      width: 284px;
      i {
        font-size: 10px;
        vertical-align: top;
        margin-left: 25px;
      }
    }
    .imgBox {
      width: 54px;
      height: 54px;
      display: inline-block;
      border: 1px solid $border-gray;
    }
    i, em {
      color: $color-main;
    }
    em {
      display: block;
      font-size: 10px;
      margin-top: 6px;
      text-align: right;
    }
  }
}
.submit-btn {
  text-align: center;
  margin-top: 20px;
  button {
    width: 90px !important;
  }
}
</style>